import {IdxMainLayout} from "../../enums/StoreEnums";

const IndexMainLayoutModule = {
    namespaced: true,
    state: {
        // start:: layout
        layout_status: IdxMainLayout.STATUS.DISPERSED,
        view_type: IdxMainLayout.TYPE.EXTRA_SMALL,
        focused_view: undefined,
        focusing_view: undefined,
        focusing_out_view: undefined,
        // end:: layout
        // start:: Theme
        theme_view_style: IdxMainLayout.Theme.STYLE.BLUE,
        theme_ornament_bed_display: true,
        theme_ornament_bed_light_display: true,
        theme_ornament_spot_light_display: true,
        theme_title_display: true,
        // end:: Theme
        _err_msg: "",
        _animation_duration: 500
    },
    mutations: {
        // start:: layout
        [IdxMainLayout.Mutations.SET_STATUS]: (state, payload) => state.layout_status = payload,
        [IdxMainLayout.Mutations.SET_TYPE]: (state, payload) => state.view_type = payload,
        [IdxMainLayout.Mutations.SET_FOCUSED_VIEW]: (state, payload) => state.focused_view = payload,
        [IdxMainLayout.Mutations.SET_FOCUSING_VIEW]: (state, payload) => state.focusing_view = payload,
        [IdxMainLayout.Mutations.SET_FOCUSING_OUT_VIEW]: (state, payload) => state.focusing_out_view = payload,
        // end:: layout

        // start:: Theme
        [IdxMainLayout.Mutations.SET_THEME_VIEW_STYLE]: (state, payload) => state.theme_view_style = payload,
        [IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_DISPLAY]: (state, payload) => state.theme_ornament_bed_display = payload,
        [IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_LIGHT_DISPLAY]: (state, payload) => state.theme_ornament_bed_light_display = payload,
        [IdxMainLayout.Mutations.SET_THEME_ORNAMENT_SPOT_LIGHT_DISPLAY]: (state, payload) => state.theme_ornament_spot_light_display = payload,
        [IdxMainLayout.Mutations.SET_THEME_TITLE_DISPLAY]: (state, payload) => state.theme_title_display = payload,
        // end:: Theme

        // in-house
        setErrorMsg: (state, payload) => state._err_msg = payload
    },
    actions: {
        // start:: layout
        [IdxMainLayout.Actions.DISPERSE]: ({state, commit}) => {
            // 1. make sure the status can only be changed from TILED to DISPERSED
            if (state.layout_status !== IdxMainLayout.STATUS.TILED) {
                commit("setErrorMsg", "layout can not disperse, because the status is" + state.layout_status)
                return
            }
            commit("setErrorMsg", "")
            // 2. mark the status with DISPERSING
            commit(IdxMainLayout.Mutations.SET_STATUS, IdxMainLayout.STATUS.DISPERSING)
            // 3. remove the DISPERSING status and change the status from TILED to DISPERSED
            setTimeout(() => {
                commit(IdxMainLayout.Mutations.SET_STATUS, IdxMainLayout.STATUS.DISPERSED)
            }, state._animation_duration)
        },
        [IdxMainLayout.Actions.TILE]: ({state, commit}) => {
            // 1. make sure the status can only be changed from DISPERSED to TILED
            if (state.layout_status !== IdxMainLayout.STATUS.DISPERSED) {
                commit("setErrorMsg", "layout can not tile, because the status is" + state.layout_status)
                return
            }
            commit("setErrorMsg", "")
            // 2. mark the status is TILING
            commit(IdxMainLayout.Mutations.SET_STATUS, IdxMainLayout.STATUS.TILING)
            // 3. remove the TILING status and change the status from DISPERSED to TILED
            setTimeout(() => {
                commit(IdxMainLayout.Mutations.SET_STATUS, IdxMainLayout.STATUS.TILED)
            }, state._animation_duration)
        },
        [IdxMainLayout.Actions.FOCUS]: ({state, commit}, payload) => {
            // 1. make sure the layout is TILED and there is no FOCUSED view
            if (state.layout_status !== IdxMainLayout.STATUS.TILED) {
                commit("setErrorMsg", "view can not be focused, because the status is" + state.layout_status)
                return
            }

            if (state.focused_view) {
                commit("setErrorMsg", "view can not be focused, because there is one focused view by " + state.focused_view)
                return
            }

            // 2. make sure all animations are completed
            if (state.focusing_view !== undefined || state.focusing_out_view !== undefined) {
                let msg = "Animation has not been completed! "
                if (state.focusing_view) msg += state.focusing_view + " is focusing!"
                if (state.focusing_out_view) msg += state.focusing_out_view + " is focusing out!"
                commit("setErrorMsg", msg)
                return
            }
            commit("setErrorMsg", "")

            // 3. Mark the target view is FOCUSING status
            commit(IdxMainLayout.Mutations.SET_FOCUSING_VIEW, payload)

            // 3. remove FOCUSING status and change the target view status from NONE to FOCUSED,
            // which means register the view [selector] to the {focused_view}
            setTimeout(() => {
                commit(IdxMainLayout.Mutations.SET_FOCUSING_VIEW, undefined)
                commit(IdxMainLayout.Mutations.SET_FOCUSED_VIEW, payload)
            }, state._animation_duration)
        },
        [IdxMainLayout.Actions.FOCUS_OUT]: ({state, commit}) => {
            // 1. make sure the layout is TILED and there is one FOCUSED view
            if (state.layout_status !== IdxMainLayout.STATUS.TILED) {
                commit("setErrorMsg", "view can not be focused out, because the status is" + state.layout_status)
                return
            }
            if (state.focused_view === undefined) {
                commit("setErrorMsg", "view can not be focused out, because there is no focused view")
                return
            }

            // 2. make sure all animations are completed
            if (state.focusing_view !== undefined || state.focusing_out_view !== undefined) {
                let msg = "Animation has not been completed! "
                if (state.focusing_view) msg += state.focusing_view + " is focusing!"
                if (state.focusing_out_view) msg += state.focusing_out_view + " is focusing out!"
                commit("setErrorMsg", msg)
                return
            }
            commit("setErrorMsg", "")

            // 3. Mark the target view is FOCUSING_OUT status
            commit(IdxMainLayout.Mutations.SET_FOCUSING_OUT_VIEW, state.focused_view)
            commit(IdxMainLayout.Mutations.SET_FOCUSED_VIEW, undefined)
            // 4. remove the FOCUSING_OUT status and mark focused view with undefined
            setTimeout(() => {
                commit(IdxMainLayout.Mutations.SET_FOCUSING_OUT_VIEW, undefined)
                commit(IdxMainLayout.Mutations.SET_FOCUSED_VIEW, undefined)
            }, state._animation_duration)
        },
        // end:: layout

        // start:: Theme
        // Ornament Bed
        [IdxMainLayout.Actions.SHOW_ORNAMENT_BED]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_DISPLAY, true)
        },
        [IdxMainLayout.Actions.HIDE_ORNAMENT_BED]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_DISPLAY, false)
        },
        [IdxMainLayout.Actions.EXCHANGE_ORNAMENT_BED]: ({state, commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_DISPLAY, !state.theme_ornament_bed_display)
        },
        // Ornament Bed light
        [IdxMainLayout.Actions.SHOW_ORNAMENT_BED_LIGHT]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_LIGHT_DISPLAY, true)
        },
        [IdxMainLayout.Actions.HIDE_ORNAMENT_BED_LIGHT]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_LIGHT_DISPLAY, false)
        },
        [IdxMainLayout.Actions.EXCHANGE_ORNAMENT_BED_LIGHT]: ({state, commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_BED_LIGHT_DISPLAY, !state.theme_ornament_bed_light_display)
        },
        // Ornament spotlight
        [IdxMainLayout.Actions.SHOW_ORNAMENT_SPOT_LIGHT]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_SPOT_LIGHT_DISPLAY, true)
        },
        [IdxMainLayout.Actions.HIDE_ORNAMENT_SPOT_LIGHT]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_SPOT_LIGHT_DISPLAY, false)
        },
        [IdxMainLayout.Actions.EXCHANGE_ORNAMENT_SPOT_LIGHT]: ({state, commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_ORNAMENT_SPOT_LIGHT_DISPLAY, !state.theme_ornament_spot_light_display)
        },
        // Ornament title
        [IdxMainLayout.Actions.SHOW_THEME_TITLE]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_TITLE_DISPLAY, true)
        },
        [IdxMainLayout.Actions.HIDE_THEME_TITLE]: ({commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_TITLE_DISPLAY, false)
        },
        [IdxMainLayout.Actions.EXCHANGE_THEME_TITLE]: ({state, commit}) => {
            commit(IdxMainLayout.Mutations.SET_THEME_TITLE_DISPLAY, !state.theme_title_display)
        }
        // end:: Theme
    },
    getters: {
        // start:: layout
        viewLayoutDispersed: state => state.layout_status === IdxMainLayout.STATUS.DISPERSED,
        viewLayoutTiled: state => state.layout_status === IdxMainLayout.STATUS.TILED,
        viewLayoutDispersing: state => state.layout_status === IdxMainLayout.STATUS.DISPERSING,
        viewLayoutTiling: state => state.layout_status === IdxMainLayout.STATUS.TILING,
        briefViewXS: state => state.view_type === IdxMainLayout.TYPE.EXTRA_SMALL,
        briefViewSM: state => state.view_type === IdxMainLayout.TYPE.SMALL,
        viewFocused: state => id => state.focused_view && state.focused_view === id,
        viewFocusing: state => id => state.focusing_view && state.focusing_view === id,
        viewFocusingOut: state => id => state.focusing_out_view && state.focusing_out_view === id,
        // end:: layout

        // start:: theme
        isGolden: state => state.theme_view_style === IdxMainLayout.Theme.STYLE.GOLDEN,
        // end:: theme

        errMsg: state => state._err_msg
    }

}
export default IndexMainLayoutModule